import React, {useEffect, useState} from 'react';
import {Layout, Tabs} from "antd";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import {useAppTitleInfo} from "@/hooks";

function IndexContent() {
    type TTabs = {
        label: string,
        key: string,
        closable: boolean
    }
    const [items, setItems] = useState<TTabs[]>([
        {
            label: "主页",
            key: "/",
            closable: false
        }
    ]);
    const {pathname: key} = useLocation();
    const {subTitle} = useAppTitleInfo();
    const navigate = useNavigate();
    useEffect(function () {
        // 不允许出现相同的标签
        if (!items.find((v: TTabs) => v.key === key)) {
            setItems([
                ...items,
                {
                    label: subTitle as string,
                    key,
                    closable: true
                }
            ])
        }

    }, [key]);

    return (
        <Layout.Content style={{margin: '5px'}}>

            <div className="site-layout-background" style={{padding: 5, height: "100%"}}>
                <Tabs
                    hideAdd={true}
                    type="editable-card"
                    // 切换面板的回调
                    onChange={activeKey => navigate(activeKey)}
                    activeKey={key}
                    onEdit={(activeKey)=>{
                        // setItems(items.filter((v:TTabs)=>v.key !== activeKey))
                        const index:number = items.findIndex((v:TTabs)=>v.key === activeKey);
                        const copyItems = [...items];
                        copyItems.splice(index,1);
                        setItems(copyItems);
                        // 判断是否关闭当前的路由面板
                        if(key === activeKey)
                            navigate(items[index-1].key);

                    }}
                    items={items}
                />


                <Outlet></Outlet>

            </div>
        </Layout.Content>
    );
}

export default IndexContent;